<template>
  <Header title='JD商城' class="headerColor">
    <!-- 这样写的话就用这个名字，否者的话就会用默认的title -->
    <!-- <template #title> 123123 </template> -->
    <template #left>
      <van-icon size="24px" name="flower-o" />
    </template>
    <!-- 搜索 -->
    <template #title>
      <van-search shape="round" background="#c72418" placeholder="请输入搜索关键词" @focus="searchFn" />
    </template>
    <template #right> <span class="dengLu" style="fontSize:20px" @click="loginFn">登录</span></template>


  </Header>
  <div>
    <HomeBannerVue></HomeBannerVue>
    <HomeGongGeVue></HomeGongGeVue>
    <HomeMiaoSa></HomeMiaoSa>
    <HomeShoppingVue></HomeShoppingVue>

  </div>
</template>

<script setup lang="ts">
import Header from '@/views/Header/header.vue'
import HomeBannerVue from './components/HomeBanner.vue';
import HomeGongGeVue from './components/HomeGongGe.vue';
import HomeMiaoSa from './components/HomeMiaoSa.vue';
import HomeShoppingVue from './components/HomeShopping.vue'
import { useRouter, type Router } from 'vue-router'
const router = useRouter();
//点击搜素,进行路由跳转
let searchFn = () => {
  router.push({
    path: '/search'

  });

}

//点击登录 ,进行路由跳转
const loginFn = ()=>{
  console.log(123);
  router.push({
    path:'/login'
  })
  
}

</script>
<style  scoped lang="scss">

</style>